<template>
  <view class="container">

	<view class="main">
		<view class="time-section">
			<view class="time-box c-base">
				<text class="">上床时间</text>
				<text class="font-54 text-bold">--:--</text>
			</view>
			<view class="time-box c-base">
				<text class="">入睡时间</text>
				<text class="font-54 text-bold">--:--</text>
			</view>
		</view>
		<view class="status-section">
			<view class="status-item" :class="{'active': valueInfo.move_state && valueInfo.move_state.slice(-1)[0] === 0}">
				<image :src="$util.img('image/health/time12.png')" class="status-icon" v-if="valueInfo.move_state && valueInfo.move_state.slice(-1)[0] === 0"></image>
				<image :src="$util.img('image/health/time11.png')" class="status-icon" v-else></image>
				<text class="font-24 c-bb">无人</text>
			</view>
			<view class="status-item" :class="{'active': valueInfo.move_state && valueInfo.move_state.slice(-1)[0] === 1}">
				<image :src="$util.img('image/health/time22.png')" class="status-icon" v-if="valueInfo.move_state && valueInfo.move_state.slice(-1)[0] === 1"></image>
				<image :src="$util.img('image/health/time21.png')" class="status-icon" v-else></image>
				<text class="font-24 c-bb">轻微运动</text>
			</view>
			<view class="status-item" :class="{'active': valueInfo.move_state && valueInfo.move_state.slice(-1)[0] === 2}">
				<image :src="$util.img('image/health/time32.png')" class="status-icon" v-if="valueInfo.move_state && valueInfo.move_state.slice(-1)[0] === 2"></image>
				<image :src="$util.img('image/health/time31.png')" class="status-icon" v-else></image>
				<text class="font-24 c-bb">频繁运动</text>
			</view>
			<view class="status-item" :class="{'active': valueInfo.move_state && valueInfo.move_state.slice(-1)[0] === 3}">
				<image :src="$util.img('image/health/time42.png')" class="status-icon" v-if="valueInfo.move_state && valueInfo.move_state.slice(-1)[0] === 3"></image>
				<image :src="$util.img('image/health/time41.png')" class="status-icon" v-else></image>
				<text class="font-24 c-bb">静卧</text>
			</view>
		</view>
	</view>
   
    <view class="boxPanel">
		<view class="data-section">
			<view class="data-item">
				<image :src="$util.img('image/health/time1.png')" class="data-icon"></image>
				<text class="font-36 text-bold" v-if="valueInfo.respiratory_rate">呼吸 {{valueInfo.respiratory_rate.slice(-1)[0]}}</text>
				<text class="font-36 text-bold" v-else>呼吸 --</text>
			</view>
			<view class="data-item">
				<image :src="$util.img('image/health/time2.png')" class="data-icon"></image>
				<text class="font-36 text-bold" v-if="valueInfo.heart_rate">心率 {{valueInfo.heart_rate.slice(-1)[0]}}</text>
				<text class="font-36 text-bold" v-else>心率 --</text>
			</view>
		</view>
		
	</view>

    
    

   
  </view>
</template>

<script>
export default {
  data() {
    return {
      startDataTimer: null,
      onlineDataTimer: null,
	  valueInfo: {
		move_state: [], //0:无人 1:轻微活动 2:频繁活动 3:静卧
		heart_rate: [], //心率
		respiratory_rate: [], //呼吸
	  }
    }
  },
  onLoad(data) {
    this.id = data.id;
    // 初始化定时请求
    this.initTimers();
  },
  onUnload() {
    // 清除定时器
    this.clearTimers();
  },
  methods: {
    // 初始化定时器
    initTimers() {
      this.startDataTimer = setInterval(() => {
        this.startRequestData();
      }, 4 * 60 * 1000); // 4分钟
      // 立即执行一次
      this.startRequestData();
    },
    // 清除定时器
    clearTimers() {
      if (this.startDataTimer) clearInterval(this.startDataTimer);
      if (this.onlineDataTimer) clearInterval(this.onlineDataTimer);
    },
    // 每隔四分钟请求一次数据
    startRequestData() {
		this.$api.sendRequest({
			url: "/api/userHealth/getData",
			data: {
				id: this.id,
			},
			success: res => {
				if(res.code == 0) {
					// 清除之前的在线数据定时器
					if (this.onlineDataTimer) clearInterval(this.onlineDataTimer);
					// 开始每15秒请求实时数据
					this.onlineDataTimer = setInterval(() => {
					this.getOnlineData();
					}, 15 * 1000);
					// 立即执行一次
					this.getOnlineData();
				}else {
					this.$util.showToast({title: res.message});
				}
			}
				
		})
	},
	// 每隔15秒请求一次数据
	getOnlineData() { 
		this.$api.sendRequest({
			url: "/api/userHealth/getBodyData",
			data: {
				id: this.id,
			},
			success: res => {
					if(res.code == 0) {
						this.valueInfo = JSON.parse(res.data.value);
						console.log(this.valueInfo)
					}else {
						this.$util.showToast({title: res.message});
					}
				}
				
		})
	},
  }
}
</script>

<style lang="scss" scoped>

.main {
	margin: 24rpx 24rpx 0;

}
.time-section {
  display: flex;
  justify-content: space-around;
  background: $color-title2;
  border-radius: 20rpx 20rpx 0 0;
  .time-box {
		display: flex;
		flex-direction: column;
		color: white;
		padding: 20rpx 30rpx;
		border-radius: 20rpx 20rpx 0 0;
		text-align: center;
		width: 40%;
	}
}







.status-section {
  display: flex;
  justify-content: space-around;
  background: #fff;
  padding: 24rpx 30rpx;
   border-radius: 0 0 20rpx 20rpx;
}

.status-item {
  display: flex;
  align-items: center;
  opacity: 0.6;
  transition: all 0.3s;
  
  &.active {
    opacity: 1;
    // .status-icon {
    //   filter: brightness(1.2);
    // }
    text {
      color: #00D075!important;
      font-weight: bold;
    }
  }
}

.status-icon {
  width: 36rpx;
  height: 36rpx;
  margin-right: 12rpx;
}



.data-section {
  display: flex;
  justify-content: space-between;
  .data-item {
	display: flex;
	align-items: center;
  }

  .data-icon {
		width: 76rpx;
		height: 76rpx;
		margin-right: 24rpx;
	}

}








</style>
